import { Component } from 'react';
import {Card, Form, Input, Button, Checkbox, message } from "antd"
import srcLogo from 'assets/logo.png'
//CssModule解决样式冲突
// 1  样式文件命名为xxx . module.scss
// 注意  xxx.module.scss是固定语法,xxx随意命名,其他的不能动
// 2  通过js访问对象属性的方式去访问:  点语法  中括号   遇到有中划线的用[]   styles[字符串]
// 3  推荐styles作为变量名
import styles from './index.module.scss'
import { loginAPI } from 'api/user';
import { setToken } from 'utils/storage';
export default class Login extends Component {
  // 提交表单的回调函数,在里面调用接口发送登录请求
  handleSubmit=async (values)=>{
    // console.log('values  ----->  ', values);
    //登录成功的逻辑
   try{
     //发送请求
    const res= await loginAPI(values)
    //保存token
    setToken(res.data.token)
    //跳转到首页
    // 编程式导航  通过js操作路由
    //1.Route组件设置的component组件,会自动带上history等props.Route组件内部处理
    //2.没有设置Route规则的,没有history等props
    this.props.history.push('/')
    //提示用户
    message.success("登录成功",1)
   }catch(error){
     //登录失败的逻辑
     console.dir(error);
     //提示用户登录失败
     message.warning(error.response.data.message,1)
   }
  }
  render() {
    return <div className={styles.login}>
      <Card className='login-container'>
        <img src={srcLogo} alt="" className='login-logo'/>
        {/* 表单 */}
        {/* onFinish  是antd自带的表单提交的回调函数,可以通过values来接收表单数据 */}
        {/* initialValues  设置表单默认值,通过键值对形式,键名要与自己设定的表单name名保持一致 */}
        <Form  autoComplete="off" onFinish={this.handleSubmit} initialValues={{mobile:'13811111111',code:'246810',agree:true}}>
          {/* Form.Item是antd Form的子组件,校验规则rules需要跟name配合才能使用 */}
      <Form.Item 
      name="mobile"
      rules={[
        {
          required: true,
          message: '手机号不能为空',
        },
        {
          pattern:/^1[3-9]\d{9}$/,
          message: '请输入正确的手机号',
        }
      ]}
      >
        <Input placeholder="请输入手机号"/>
      </Form.Item>

      <Form.Item
      name="code"
      rules={[
        {
          required: true,
          message: '验证码不能为空',
        },
        {
          pattern:/^\d{6}$/,
          message: '请输入正确的六位验证码',
        }
      ]}
      >
        <Input placeholder="请输入验证码"/>
      </Form.Item>

      <Form.Item
      name="agree"
      // valuePropName表示使用checked属性的值,去验证校验规则
      valuePropName='checked'
      rules={[
        {
          //required只负责校验值为undefined,不处理值为false的情况
          //validator是自定义校验函数
          //判断value的值,
          //如果存在并为true,返回Promise.resolve()
          //如果不存在或为false,则返回Promise.reject(提示信息)
          validator:(_,value)=>value?Promise.resolve():Promise.reject('请阅读并同意用户协议')
        }
      ]}
      >
        <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
      </Form.Item>

      <Form.Item>
        <Button block type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
      </Card>
    </div>;
  }
}
